<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>JavaScripTools Manual</title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>

<body>
<br>
<h1>JavaScripTools Manual</h1>
<h2>InputMask</h2>
<h3>Working with the NumberMask</h3>
<p>NumberMask is a mask that accepts only numbers, and uses a <a href="Parsers_number.html">NumberParser</a> to 
format and parse the text on an input field. Several mask instances can (and should!) share a single parser.</p>
<p>The NumberParser instance is passed on the constructor, as well as the field name or reference. Optionally, it
can receive a third argument, the maximum digits on the integer part. The other constructor parameters are event
handlers, and are not recommended to be passed on the constructor. For more details on the event handlers,
see <a href="InputMask_intro.html">here</a>.</p>
<p>The mask can be typed from left to right or from right to left. Many applications (specially for currencies) 
prefer the right to left, so, it's the default. In this mode, assuming 2 decimal places, if the user presses, 
in this order, 123456, the resulting number is 1.234,56. Only numbers are typed. In this mode, the parser is required
to restrict the number of digits on the decimal part (using the decimalDigits property). On the left to right mode, 
to type the same number, the user should type 1234,56 (including the decimal separator). This mode is better if 
more decimal places are accepted. Unlimited decimal digits is also supported in this mode. To set the typing mode, 
set the <code>leftToRight</code> property with a boolean value (true means left to right and false means right to left).</p>
<p>The number of digits on the integer part may be limited using the <code>maxIntegerDigits</code> property 
(-1 means no limit). The NumberMask may also accept or not the user to change the number signal (using the minus key)
with the <code>allowNegative</code> property.</p>
<p>It is also possible to set / retrieve the input text using numbers, with the <code>setAsNumber(number)</code> 
and <code>getAsNumber()</code> methods.</p>
<p>Here are some examples (assuming an input field called myNumber):</p>
<pre>//We need a NumberParser instance
var parser = new NumberParser(...);

//Here is the basic usage
new NumberMask(parser, "myNumber");

//Now we will customize it a little
var mask = new NumberMask(parser, "myNumber");
mask.allowNegative = false;
mask.leftToRight = false;

//Assigning the value with a number
mask.setAsNumber(1234.56); //Would display something like "1.234,56" on the input

//Retrieving the value as a number
alert(mask.getAsNumber() * 3);
</pre>
<br><br>
<hr>
<table width="100%">
    <tr>
        <td width="33%" align="left"><b>Previous:</b><br><a href="InputMask_mask.html">Working with the InputMask</a></td>
        <td width="34%" align="center"><a href="index.html">Table of Contents</a></td>
        <td width="33%" align="right"><b>Next:</b><br><a href="InputMask_date.html">Working with the DateMask</a></td>
    </tr>
</table>

</body>
</html>
